<template>
  <view class="home-container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <view class="avatar">
          <image src="@/static/images/logo.png" class="avatar-img" />
        </view>
        <view class="user-details">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-address">{{ userInfo.address }}</text>
        </view>
      </view>
      <view class="weather-info">
        <text class="weather-temp">{{ weather.temperature }}°</text>
        <text class="weather-desc">{{ weather.description }}</text>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="quick-actions">
      <view class="section-title">快捷功能</view>
      <view class="actions-grid">
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-item"
          @click="handleAction(action)"
        >
          <view class="action-icon" :style="{ backgroundColor: action.color }">
            <text class="icon">{{ action.icon }}</text>
          </view>
          <text class="action-name">{{ action.name }}</text>
        </view>
      </view>
    </view>

    <!-- 公告通知 -->
    <view class="notice-section">
      <view class="section-title">
        <text>公告通知</text>
        <text class="more-btn" @click="goToNotices">更多</text>
      </view>
      <view class="notice-list">
        <view 
          v-for="notice in notices" 
          :key="notice.id"
          class="notice-item"
          @click="viewNotice(notice)"
        >
          <view class="notice-content">
            <text class="notice-title">{{ notice.title }}</text>
            <text class="notice-time">{{ notice.time }}</text>
          </view>
          <view class="notice-badge" v-if="notice.isNew">新</view>
        </view>
      </view>
    </view>

    <!-- 服务统计 -->
    <view class="stats-section">
      <view class="section-title">服务统计</view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.repairs }}</text>
          <text class="stat-label">待处理报修</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.complaints }}</text>
          <text class="stat-label">待处理投诉</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.payments }}</text>
          <text class="stat-label">待缴费项</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.visitors }}</text>
          <text class="stat-label">今日访客</text>
        </view>
      </view>
    </view>

    <!-- 最近活动 -->
    <view class="recent-section">
      <view class="section-title">最近活动</view>
      <view class="activity-list">
        <view 
          v-for="activity in recentActivities" 
          :key="activity.id"
          class="activity-item"
        >
          <view class="activity-icon" :style="{ backgroundColor: activity.color }">
            <text class="icon">{{ activity.icon }}</text>
          </view>
          <view class="activity-content">
            <text class="activity-title">{{ activity.title }}</text>
            <text class="activity-desc">{{ activity.description }}</text>
            <text class="activity-time">{{ activity.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <!-- 隐私协议组件 -->
    <agree-privacy v-model="showAgreePrivacy" :disable-check-privacy="false" @agree="handleAgree" />
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
// #ifdef MP-WEIXIN
import { useShare } from '@/hooks';
// #endif

// #ifdef MP-WEIXIN
// 分享使用示例
const { onShareAppMessage, onShareTimeline } = useShare({
  title: '智慧物业',
  path: 'pages/tab/home/index',
  imageUrl: '',
});
onShareAppMessage();
onShareTimeline();
// #endif

// 用户信息
const userInfo = ref({
  name: '张先生',
  address: '阳光花园 3栋2单元1201室'
});

// 天气信息
const weather = ref({
  temperature: 22,
  description: '多云'
});

// 快捷功能
const quickActions = ref([
  { id: 1, name: '物业缴费', icon: '💰', color: '#4CAF50' },
  { id: 2, name: '报修服务', icon: '🔧', color: '#FF9800' },
  { id: 3, name: '房源信息', icon: '🏠', color: '#2196F3' },
  { id: 4, name: '投诉建议', icon: '📝', color: '#9C27B0' },
  { id: 5, name: '我的房屋', icon: '🏡', color: '#E91E63' },
  { id: 6, name: '我的车位', icon: '🚗', color: '#607D8B' },
  { id: 7, name: '快递代收', icon: '📦', color: '#795548' },
  { id: 8, name: '智能客服', icon: '💬', color: '#10b981' }
]);

// 公告通知
const notices = ref([
  { id: 1, title: '关于小区停水通知', time: '2024-01-15', isNew: true },
  { id: 2, title: '春节期间物业服务安排', time: '2024-01-10', isNew: false },
  { id: 3, title: '电梯维护保养通知', time: '2024-01-08', isNew: false }
]);

// 服务统计
const stats = ref({
  repairs: 2,
  complaints: 1,
  payments: 3,
  visitors: 5
});

// 最近活动
const recentActivities = ref([
  { 
    id: 1, 
    title: '物业费缴费成功', 
    description: '2024年1月物业费已缴纳',
    time: '2小时前',
    icon: '✅',
    color: '#4CAF50'
  },
  { 
    id: 2, 
    title: '报修工单已处理', 
    description: '门锁维修已完成',
    time: '1天前',
    icon: '🔧',
    color: '#FF9800'
  },
  { 
    id: 3, 
    title: '访客登记', 
    description: '李先生来访已登记',
    time: '2天前',
    icon: '👥',
    color: '#2196F3'
  }
]);

const showAgreePrivacy = ref(false);

// 处理快捷功能点击
function handleAction(action: any) {
  console.log('点击功能:', action.name);
  
  // 根据功能名称进行路由跳转
  switch (action.name) {
    case '我的房屋':
      uni.navigateTo({
        url: '/pages/common/my-house/index'
      });
      break;
    case '房源信息':
      uni.navigateTo({
        url: '/pages/common/house-list/index'
      });
      break;
    case '智能客服':
      uni.navigateTo({
        url: '/pages/common/customer-service/index'
      });
      break;
    case '我的车位':
      uni.showToast({
        title: '我的车位功能开发中',
        icon: 'none'
      });
      break;
    default:
      uni.showToast({
        title: `进入${action.name}`,
        icon: 'none'
      });
      break;
  }
}

// 查看公告详情
function viewNotice(notice: any) {
  console.log('查看公告:', notice.title);
  uni.showToast({
    title: `查看${notice.title}`,
    icon: 'none'
  });
}

// 前往公告列表
function goToNotices() {
  uni.showToast({
    title: '前往公告列表',
    icon: 'none'
  });
}

// 同意隐私协议
function handleAgree() {
  console.log('同意隐私政策');
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 30rpx;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60rpx 0 40rpx;
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.user-address {
  font-size: 24rpx;
  opacity: 0.8;
}

.weather-info {
  text-align: right;
}

.weather-temp {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}

.weather-desc {
  font-size: 24rpx;
  opacity: 0.8;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.more-btn {
  font-size: 24rpx;
  color: #666;
}

.quick-actions {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.icon {
  font-size: 36rpx;
}

.action-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.notice-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border-left: 6rpx solid #21d59d;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.notice-time {
  font-size: 24rpx;
  color: #666;
}

.notice-badge {
  background: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.stats-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-item {
  text-align: center;
  padding: 30rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  color: white;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.recent-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.activity-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.activity-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.activity-time {
  font-size: 22rpx;
  color: #999;
}
</style>
